
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    
    <title>Document</title>
    <link rel="stylesheet" href="../css/employee.css">
</head>
<body>
    <header>
        <h2 style="line-height: 80px; margin-left: 50px;">分类管理</h2>
    </header>
    <main>
        <div class="main-center"> 
            <div class="submit">
                <input type="submit" value="+新增分类" id="add">
                <input type="submit" value="-删除分类" id="del">
            </div>
            <div class="table">
                <table width="90%">
                    <tr style="border: 2px solid rgb(243, 244, 249);">
                        <td>分类名称</td>
                        <td>分类类型</td>
                        <td>操作时间</td>
                        <td>排序</td>
                        <td>操作</td>
                    </tr>
                    <c:forEach var="classInfo" items="${classInfos}">
                        <tr style="border: 2px solid rgb(243, 244, 249);">
                            <td>${classInfo.typesName}</td>
                            <td>${classInfo.types}</td>
                            <td>${classInfo.updateTime}</td>
                            <td>${classInfo.order}</td>
                            <td>
                                <a href="../classInfo/selectByOrder?order=${classInfo.order}" id="update">修改</a>
                                <a href="../classInfo/delete?order=${classInfo.order}">删除</a>
                            </td>
                        </tr>
                    </c:forEach>
                </table>
            </div>
        </div>
    </main>
    <div id="masking">
        <div class="operation" style="height: 280px;">
            <div class="operation-header">
                <h2 style="padding: 20px;" id="test">新增员工</h2>
            </div>
            <div class="operation-main">
                <form action="../classInfo/addClassInfo" method="post" target="a" id="myform">
                    <label for="">分类名称</label>
                    <input type="text" name="typesName" value="${classInfo.typesName}" ><br>
                    <label for="">分类类型</label>
                    <input type="text" name="types" value="${classInfo.types}"><br>
                    <label for="">排序</label>
                    <input type="text" name="order" value="${classInfo.order}" id="order"><br>
                    <input type="submit">
                    <input type="button" id="cancel" value="取消">
                </form>
            </div>
        </div>
    </div>
</body>
<script>
    let masking = document.getElementById("masking");
    
    document.getElementById("add").onclick = function () {
        masking.style.display = "block";
    };
    document.getElementById("cancel").onclick = function () {
        masking.style.display = "none";
    };
    

    function update(){
        let order = document.getElementById("order").value;
        if(order != ''){
            masking.style.display = "block";
            document.getElementById("test").innerHTML = "修改分类";
            document.getElementById("myform").action = "../employee/updateById?typesName=" + typesName; 
        }
    }

    update();
</script>
</html>